<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>欢迎来到聊天室</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <script type="application/javascript" src="/js/jquery-3.5.1.min.js"></script>
  <script type="application/javascript" src="/layui/layui.js"></script>
</head>

<body class="layui-layout-body">

  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="layui-row layui-col-space15">
      <ul class="flow-default" id="LAY_demo1"></ul>
    </div>
  </div>

  <!-- <div class="layui-footer">
  </div> -->
  <script>
    layui.use('flow', function () {
      var flow = layui.flow;
      flow.load({
        elem: '#LAY_demo1' //流加载容器
        , done: function (page, next) { //执行下一页的回调
          //模拟数据插入
          setTimeout(function () {
            var lis = [];
            for (var i = 0; i < 8; i++) {
              lis.push('<li>' + ((page - 1) * 8 + i + 1) + '</li>')
            }
            next(lis.join(''), page < 10); //假设总页数为 10
          }, 500);
        }
      });
    });
  </script>
</body>

</html>